<template>
  <!-- 开始页面 -->
  <div class="start">
    <van-image height="100vh" fit="fill" :src="headImg" />
    <van-button color="#666666" hairline="true" @click="toLogin"
      >跳过 {{ count }}</van-button
    >
  </div>
</template>

<script>
export default {
  name: 'start',
  data() {
    return {
      count: '',
      headImg: require('../../../mock/images/start.jpg'),
    }
  },
  created() {
    this.countDown() // 倒计时
  },
  methods: {
    // 定时器三秒自动跳转
    countDown() {
      const TIME_COUNT = 3
      if (!this.timer) {
        this.count = TIME_COUNT
        this.timer = setInterval(() => {
          if (this.count > 1) {
            this.count--
          } else {
            clearInterval(this.timer)
            this.$router.push('/login')
          }
        }, 1000)
      }
    },
    toLogin() {
      this.$router.push('/login')
    },
  },
}
</script>

<style scoped>
html,
body,
.open {
  height: 100%;
  width: 100%;
}
.van-button {
  width: 70px;
  height: 30px;
  font-size: 12px;
  color: #fff;
  position: absolute;
  top: 20px;
  left: 75%;
}
</style>
